<style lang="less">
.title-text span {
  display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
  position: relative; /*定位横线（当横线的父元素）*/

  color: black; /*居中文字的颜色*/
  font-weight: bold;
  text-align: center;
}

.title-text span:before,
.title-text span:after {
  content: "";
  position: absolute; /*定位背景横线的位置*/
  top: 50%;
  background: #dfdfdf; /*背景横线颜色*/
  width: 44%; /*单侧横线的长度*/
  height: 1px;
}

.title-text span:before {
  left: 0; /*调整背景横线的左右距离*/
}

.title-text span:after {
  right: 0;
}
</style>
<template >

  <div class="search" style="background-color: rgb(255,255,255)">
    <Tabs type="card"  @on-click="clickType">
        <TabPane label="审核页面"></TabPane>
        <TabPane label="影像资料"></TabPane>
      </Tabs>
    <div class="addInfo" style="display: block" v-if="index==0">
      <h2 class="title-text"><span>审核意见</span></h2>
      <Row style="margin-top: 1%;border: 1px solid #dcdee2; border-color: #e8eaec;    margin: 8px;">
        <Form ref="companyForm" :model="companyForm" :label-width="140">
          <Row style="padding-top: 11px">
            <i-col span="12">
              <FormItem label="审核意见" prop="useStstus" style="margin-left: 40%">
                <Select v-model="companyForm.useStstus" filterable style="    width: 200px;" size="default">
                  <Option value="00">通过</Option>
                  <Option value="03">退回</Option>
                  <Option value="04">拒绝</Option>
                </Select>
              </FormItem>
            </i-col>

          </Row>
          <Row >
            <i-col span="12">
                    <Form-item label="意见" prop="audit" style="margin-left: 40%">
                      <Select v-model="audit" placeholder="请选择" size="default" clearable style="width: 160%" @on-change="checkAudit">
                         <Option v-for="item in auditOpinion" :value="item.title" :key="item.title">{{ item.title }}
                      </Option>
                      </Select>
                    </Form-item>
            </i-col>
            
          </Row>
          <Row>
            <i-col span="12">
              <FormItem label="备注" prop="startStopReason" style="margin-left: 40%">
                <Input type="textarea" size="default" v-model="companyForm.startStopReason" clearable placeholder="请输入"  maxlength="100" show-word-limit :autosize="true"
                  style="width: 160%" />
              </FormItem>
            </i-col>
            <i-col span="6">
              <Button @click="handleBack" size="large" type="primary"
                style=" float: right;   ">返回</Button>
              <Button @click="handleCommit('companyForm')" size="large" type="primary" 
                style=" float: right; margin-right: 10px;  ">提交</Button>
            </i-col>

          </Row>

        </Form>
      </Row>
    </div>
    <div v-if="index==1">
      <file-operation :uploadParam="uploadParam" :isInt="canUpload" :path="path" readOnly ></file-operation>
    </div>
    <div class="addInfo" style="display: block" id="thirdCompany" v-if="index==0">
      <h2 class="title-text"><span id="gkType">见证人信息</span></h2>
      <Row style="margin-top: 1%;border: 1px solid #dcdee2; border-color: #e8eaec;    margin: 8px;">
        <Form ref="companyForm" :model="companyForm" :rules="ruleValidate" :label-width="140">
          <Row style="padding-top: 11px">
            <i-col span="12">
              <FormItem label="SP名称" prop="channelId" style="margin-left: 40%">
                <Select v-model="companyForm.channelId" filterable disabled style="    width: 200px;" size="default">
                  <Option v-for="item in baseInfo" :value="item.id" :key="item.id">{{ item.channelFullName }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="业务类型" prop="businessAttributes" style="margin-left: 10%">
                <RadioGroup v-model="companyForm.businessAttributes" size="default">
                  <Radio label="1" disabled companyForm.businessAttributes>二手车</Radio>
                  <Radio label="0" disabled companyForm.businessAttributes>新车</Radio>
                </RadioGroup>
              </FormItem>
            </i-col>

          </Row>
          <Row>
            <i-col span="12">
              <FormItem label="见证人姓名" prop="witnessName" style="margin-left: 40%">
                <Input type="text" size="default" disabled v-model="companyForm.witnessName" clearable placeholder="请输入"
                  style="width: 200px" />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="见证人身份证号" prop="witnessIdCard" style="margin-left: 10%">
                <Input type="text" disabled size="default" v-model="companyForm.witnessIdCard" clearable placeholder="请输入"
                  style="width: 200px" />
              </FormItem>
            </i-col>

          </Row>

          <Row>
            <i-col span="12">
              <Form-item label="见证人联系电话" prop="witnessContactNumber" style="margin-left: 40%">
                <Input type="text" disabled size="default" v-model="companyForm.witnessContactNumber" clearable
                  placeholder="请输入" style="width: 200px;" />
              </Form-item>
            </i-col>

            <i-col span="12">
              <Form-item label="有效期终止日期" prop="witnessValidityAuthorization" style="margin-left: 10%">
                <Date-picker type="date" size="default" disabled v-model="companyForm.witnessValidityAuthorization"
                  placeholder="选择日期" style="width: 200px"></Date-picker>
              </Form-item>
            </i-col>
          </Row>
          <Row>
            <i-col span="12">
              <Form-item label="备注" prop="remake" style="margin-left: 40%">
                <Input ype="text" disabled size="default" type="textarea" :rows="4"
                  v-model="companyForm.remake" clearable placeholder="请输入" style="width: 240%;" />
              </Form-item>
            </i-col>

          </Row>

        </Form>
      </Row>
    </div>
  </div>

</template>

<script>
import {
  getCaseSave,
  toExamine,
  getWitnessById,
  workflowEx
} from "@/projects/afs-channel/api/witness/witness";
import { getBaseInfo } from "@/projects/afs-channel/api/common/common";
import { getDictDataByType } from "@/projects/basic/api/admin/datadic";
import FileOperation from "_p/basic/pages/image/upload-file/fileOperation.vue";
export default {
  name: "witness-examine",
  components: {FileOperation},
  data() {
    const validateMobile = (rule, value, callback) => {
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    return {
      canUpload: false,
      uploadParam: {
        busiNo: "",
        belongNo: "",
        busiType: "",
        busiData: {}
      },
      path:"channel",


      loading: true,
      modalType: 0,
      index:0,
      auditOpinion:[],
      audit:null,

      companyForm: {
        // 追加样式用的
        disabled: null,
        id: null,
        channelId: null, //渠道id
        businessAttributes: "0", // 新车还是二手车
        witnessName: null, // 见证人名字
        witnessIdCard: null, // 见证人 身份证
        witnessContactNumber: null, //见证人电话
        createTime: null, // 首次登记日期
        witnessValidityAuthorization: null, // 授权到期时间
        remake: null, // 备注

        useStstus: null, //修改的状态状态
        useRemake: null, // 修改的备注
        startStopReason: null // 原因
      },

      // 存放合作商的集合
      baseInfo: [],

      // 下面用于表单必填验证
      ruleValidate: {
        channelId: [{ required: true, message: "请选择SP", trigger: "blur" }],

        witnessName: [
          { required: true, message: "请输入见证人姓名", trigger: "blur" }
        ],
        witnessIdCard: [
          { required: true, message: "请输入证件号", trigger: "blur" }
        ],
        witnessContactNumber: [
          { required: true, message: "请输入正确是手机号", trigger: "blur" },
          { validator: validateMobile, trigger: "blur" }
        ]
      },
      submitLoading: false,
      total: 0
    };
  },
  methods: {
    init() {
      this.companyForm.id = this.afs.getPageParams(this).id;
      this.getWitnessById();
      this.getBaseInfo();
      this.getChannelStatus();
    },
    checkAudit(v){
      this.companyForm.startStopReason=v;
    },
    // 获取状态数据字典
    getChannelStatus() {
      let param = {
        type: "auditOpinion"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.auditOpinion = res.data;
        }
      });
    },
    // 切换审核页面或者影像资料
    clickType(type) {
      this.index = type;
      if(this.index=="1"){
        console.log("影像件上传!")
        this.initGetFilterParams();
      }
    },

    // 获取附件数据
    initGetFilterParams() {
      console.log(this.companyForm.id);
      this.uploadParam.busiNo = this.companyForm.id;
      this.uploadParam.belongNo = "witnessApply";
      this.uploadParam.busiData = {};
      this.uploadParam.busiType = "witnessApply";
      this.canUpload = true;
    },
    // 通过id 查询这条信息
    getWitnessById() {
      getWitnessById(this.companyForm)
        .then(res => {
          if (res.code === "0000") {
            this.companyForm = res.data;
          }
        })
        .catch(() => {});
    },

    // 点击返回
    handleBack() {
      // 先关闭本页面再跳转页面
      this.afs.closeTab(this);
    },
    // 点击审核
    apply() {},
    // 点击提交
    handleCommit(name) {
      if (
        this.companyForm.useStstus == null ||
        this.companyForm.useStstus == undefined ||
        this.companyForm.useStstus == ""
      ) {
        this.$Message.error("请选择审批意见！");
        return;
      }
      if(this.companyForm.useStstus!="00"){

        if(this.companyForm.startStopReason==null||this.companyForm.startStopReason==''||this.companyForm.startStopReason==undefined){
          this.$Message.error("请填写备注！");
          return;
        }
      }
      let params = {
        id: this.companyForm.id,
        status: this.companyForm.useStstus,
        startStopReason: this.companyForm.startStopReason
      };
      // 点击提交操作修改见证人状态
      toExamine(params)
        .then(res => {
          if (res.code === "0000") {
            this.$Message.success("操作成功");
             this.afs.closeTab(this);
            
          }
        })
        .catch(() => {});
    },

    // 上传文件页面
    openFileUpload() {
      console.log(this.isShowFile);
      this.isShowFile = !this.isShowFile;
    },

    // 获取合作商信息接口
    getBaseInfo() {
      getBaseInfo({status:""}).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.baseInfo = res.data;
        }
      });
    },

    // 获取当前时间
    getTime() {
      var date = new Date();
      var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
      var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
      var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
      var hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
      var minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
      var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)
      //修改月份格式
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      //修改日期格式
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      //修改小时格式
      if (hours >= 0 && hours <= 9) {
        hours = "0" + hours;
      }
      //修改分钟格式
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      //修改秒格式
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      console.log("年" + year);
      //格式(yyyy-mm-dd hh:mm:ss)
      var currentFormatDate =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      this.companyForm.createTime = currentFormatDate;
      console.log(currentFormatDate);
    }
  },
  // 初始化加载
  mounted() {
    this.init();
  }
};
</script>
